<template>
    <div class="template" style="background-color: #323232;align-items: center;display: flex;flex-direction: column;">
        <div class="makeTop" style="z-index: 9;">
            <img :src="back" @click="router.back()" style="width: 40px;height: 40px;"/>
            <div>Card</div>
            <img :src="download" @click="savePic" style="width: 40px;height: 40px;"/>
        </div>
        <div style="height: 60vh;width: 70vw; position: relative;margin-top: 5vh;">
            <img :src="katao" class="katao"/>
            <img :src="cardLeft" style="height: 36vh;position: absolute;left: 2vw;bottom: 5vh;z-index: 9;"/>
            <div class="getPic" ref="getPic" :style="{background: cardStyle.bgColor}" @click="lookSave">
                <img :src="cardBG[cardStyle.bgPic]" v-if="bgType == 1" style="width: 100%;height: 100%;"/>
                <div class="userInfo">
                    <div class="avatar">
                        <div class="myAva">
                            <img :src="ava0[cardStyle.avatar.index]" style="width: 100%;" v-if="cardStyle.avatar.type == 0"/>
                            <img :src="ava1[cardStyle.avatar.index]" style="width: 100%;" v-if="cardStyle.avatar.type == 1"/>
                            <img :src="cardStyle.myAva" style="width: 100%;min-height: 100%;" v-if="cardStyle.avatar.type == 3"/>
                        </div>
                    </div>
                    <div class="info1" style="margin-top: 2vh;">{{ userInfo.name  }}</div>
                    <div class="info1" style="margin-top: 1vh;">{{ userInfo.jobs }}</div>
                    <div class="info2" style="margin-top: 2vh;max-width: 90%;">Phone:<span :style="{fontFamily: fontFamily[cardStyle.fontFamily], color: cardStyle.fontColor}">{{ userInfo.phone }}</span></div>
                    <div class="info2" style="margin-top: 1vh;max-width: 90%;">Email:<span :style="{fontFamily: fontFamily[cardStyle.fontFamily], color: cardStyle.fontColor}">{{ userInfo.email }}</span></div>
                    <div class="info2" style="margin-top: 1vh;max-width: 90%;">ID NO:<span :style="{fontFamily: fontFamily[cardStyle.fontFamily], color: cardStyle.fontColor}">{{ userInfo.idno }}</span></div>
                    <div class="ma" id="qrcode" ref="qrcode" style="margin-top: 1.2vh;" v-show="label[2] == 1"></div>
                    <img class="ma" id="barcode" v-show="label[2] == 0" />
                </div>
            </div>
        </div>
        <div style="width: 100%;padding: 0 18px;box-sizing: border-box;position: fixed;bottom: 5vh;">
            <div class="caozuo">
            <div v-if="checkId == 0" class="calzuoItem">
                <div class="label">
                    <div :class="label[0] == 0? 'labelItem labelItem_active' : 'labelItem'" @click="label[0] = 0">Color</div>
                    <div :class="label[0] == 1? 'labelItem labelItem_active' : 'labelItem'" @click="label[0] = 1">Pattern</div>
                </div>
                <div v-if="label[0] == 0" style="width: 100%;display: flex;justify-content: center;margin-top: 3vh;">
                    <colorPick v-model="cardStyle.bgColor" @colorChange="bgType = 0" />
                </div>
                <div v-if="label[0] == 1" class="zygd">
                    <div class="cardBGItem" v-for="(item, index) in cardBG" :key="index" style="position: relative;">
                        <img :src="item" style="width: 100%;height: 100%;border-radius: 8px" @click="checkBG(index)"/>
                        <img :src="coins"  style="width: 15px;position: absolute;top: 0px;right: -5px;" v-if="index > 2"/>
                    </div>

                </div>
            </div>
            <div v-if="checkId == 1" class="calzuoItem">
                <div class="label" >
                    <div :class="label[1] == 0? 'labelItem labelItem_active' : 'labelItem'" @click="label[1] = 0">Normal</div>
                    <div :class="label[1] == 1? 'labelItem labelItem_active' : 'labelItem'" @click="label[1] = 1">Cartoon</div>
                </div>
                <div v-if="label[1] == 0" class="zygd">
                    <div class="cardBGItem" @click="myPic(0)">
                        <img :src="pic" />
                    </div>
                    <div v-for="(item, index) in ava0" :key="index" class="cardBGItem" style="position: relative;">
                        <img :src="item" style="width: 100%;height: 100%;border-radius: 8px" @click="checkAva(0, index)"/>
                        <img :src="coins"  style="width: 15px;position: absolute;top: 0px;right: -5px;" v-if="index > 2"/>
                    </div>
                </div>
                <div v-if="label[1] == 1" class="zygd">
                    <div v-for="(item, index) in ava1" :key="index" class="cardBGItem" style="position: relative;">
                        <img :src="item" style="width: 100%;height: 100%;border-radius: 8px" @click="checkAva(1,index)"/>
                        <img :src="coins"  style="width: 15px;position: absolute;top: 0px;right: -5px;" v-if="index > 2"/>
                    </div>
                </div>
            </div>
            <div v-if="checkId == 2" class="calzuoItem">
                <div class="label" >
                    <div :class="label[2] == 1? 'labelItem labelItem_active' : 'labelItem'" @click="label[2] = 1">QRcode</div>
                    <div :class="label[2] == 0? 'labelItem labelItem_active' : 'labelItem'" @click="label[2] = 0">Barcode</div>
                </div>
                <div v-if="label[2] == 0" style="width: 100%;display: flex;justify-content: center;margin-top: 3vh;">
                    <colorPick v-model="cardStyle.barcodeColor" @colorChange="getJsBarcode" />
                </div>
                <div v-if="label[2] == 1" style="width: 100%;display: flex;justify-content: center;margin-top: 3vh;">
                    <colorPick v-model="cardStyle.QrCodeColor" @colorChange="creatQrCode" />
                </div>
            </div>
            <div v-if="checkId == 3" class="calzuoItem">
                <div class="label" >
                    <div :class="label[3] == 0? 'labelItem labelItem_active' : 'labelItem'" @click="label[3] = 0">Font</div>
                    <div :class="label[3] == 1? 'labelItem labelItem_active' : 'labelItem'" @click="label[3] = 1">Color</div>
                </div>
                <div v-if="label[3] == 0" class="zygd">
                    <div  v-for="(item, index) in fontFamily" :key="index" class="cardBGItem" :style="{fontFamily: item}" @click="cardStyle.fontFamily = index" >Font</div>
                </div>
                <div v-if="label[3] == 1" style="width: 100%;display: flex;justify-content: center;margin-top: 3vh;">
                    <colorPick v-model="cardStyle.fontColor" />
                </div>
            </div>
            </div>
            <div class="mean">
            <img :src="bgMean_active" v-if="checkId == 0"/>
            <img :src="bgMean" v-else @click="checkId = 0"/>
            <img :src="avaMean_active" v-if="checkId == 1"/>
            <img :src="avaMean" v-else @click="checkId = 1"/>
            <img :src="qrMean_active" v-if="checkId == 2"/>
            <img :src="qrMean" v-else @click="checkId = 2"/>
            <img :src="fontMean_active" v-if="checkId == 3"/>
            <img :src="fontMean" v-else @click="checkId = 3"/>
            </div>
        </div>
    </div>
    <van-popup v-model:show="Infoshow" :style="{ background : 'transparent', }">
        <div style="background-color: transparent;height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;">
        <div class="pushInfo">
            <img :src="close" style="position: absolute;top: 15px;right: 15px;width: 14px;" @click="Infoshow = false"/>
            <div class="infoTitle">Modify information</div>
            <div class="infoItem">Name: <van-field maxlength="25" v-model="userInfoDemo.name" placeholder="Please enter name" /></div>
            <div class="infoItem">Jobs:<van-field maxlength="25" v-model="userInfoDemo.jobs" placeholder="Please enter jods" /></div>
            <div class="infoItem">ID NO:<van-field maxlength="20" type="number" v-model="userInfoDemo.idno" placeholder="Please enter id" /></div>
            <div class="infoItem">Phone:<van-field  maxlength="20" v-model="userInfoDemo.phone" placeholder="Please enter phone" /></div>
            <div class="infoItem" style="margin-bottom: 40px;">Email:<van-field maxlength="20" v-model="userInfoDemo.email" placeholder="Please enter email" /></div>
            <img :src="save" style="position: absolute;bottom: -30px;" @click="saveInfo"/>
        </div>
    </div>
    </van-popup>
</template>
<script setup>
import { showToast, showConfirmDialog } from 'vant';
import html2canvas from "html2canvas";
import QRCode from 'qrcodejs2-fix'
import JsBarcode from 'jsbarcode'
import download from '../assets/download.png'
import back from '../assets/back.png'
import katao from '../assets/katao.png'
import bgMean from '../assets/bgMean.png'
import bgMean_active from '../assets/bgMean_active.png'
import avaMean from '../assets/avaMean.png'
import avaMean_active from '../assets/avaMean_active.png'
import qrMean from '../assets/qrMean.png'
import qrMean_active from '../assets/qrMean_active.png'
import fontMean from '../assets/fontMean.png'
import fontMean_active from '../assets/fontMean_active.png'
import colorPick from '../components/colorPick.vue'
import {cardBGList} from '../cardBG'
import cardLeft from '../assets/cardLeft.png'
import pic from '../assets/pic.png'
import close from '../assets/close.png'
import save from '../assets/save.png'
import coins from '../assets/coins.png'
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref } from 'vue'
import {avatar} from '../avatar'
const router = useRouter()
const route = useRoute()
const cardBG = cardBGList
const ava0 = avatar[0]
const ava1 = avatar[1]
let fontFamily = ['poppinsbold', 'PollerOne', 'PatuaOne-Regular', 'PatrickHand-Regular', 'PassionOne-Regular', 'RubikBlack']
const Infoshow = ref(false)

const checkId = ref(0)
const label = ref([0,0,1,0])
let bgType = ref(0)
const cardStyle = ref({
    bgColor: '#683CC3',
    bgPic: '',
    avatar: {type: 0, index: 0},
    myAva: '',
    barcodeColor: '#030E4D',
    QrCodeColor: '#030E4D',
    fontFamily: 0,
    fontColor: '#030E4D'
})
const userInfo = ref({
    name: 'Name',
    jobs: 'Jobs',
    idno: 'Click card',
    phone: 'Click card',
    email: 'Click card'
})
const userInfoDemo = ref({
    name: '',
    jobs: '',
    idno: '',
    phone: '',
    email: ''
})

const checkBG = (index) => {
    if (cardStyle.value.bgPic == index && bgType.value == 1) {
        bgType.value = 0
    }else {
        bgType.value = 1
        cardStyle.value.bgPic = index
    }
}
const checkAva = (type, index) => {
    cardStyle.value.avatar.type = type
    cardStyle.value.avatar.index = index
}
const myPic = (type) => {
    window['picture'] = (data)=>{
        cardStyle.value.avatar.type = 3
		cardStyle.value.myAva = data
	}
	window['send'](`terms://photo?type=${type}`);
}
let coinsNum = ref(0)
onMounted(() => {
    cardStyle.value.avatar.type = route.query.type
    creatQrCode()
    getJsBarcode()
    coinsNum.value = localStorage.getItem('workLicenseNum') ? Number(localStorage.getItem('workLicenseNum')) : 0
})

const qrcode = ref('')
const creatQrCode = ()  => {
    qrcode.value.innerHTML = '';
    new QRCode(qrcode.value, {
        text: userInfo.value.idno,
        width: 75,
        height: 75, 
        colorDark: cardStyle.value.QrCodeColor ,
        colorLight: 'transparent',
        correctLevel: QRCode.CorrectLevel.H,
      })
}
const getJsBarcode = () => {
    JsBarcode('#barcode', userInfo.value.idno,
       {
         displayValue: false,
         background: 'transparent',
         lineColor: cardStyle.value.barcodeColor,
         height: 50,
         width: 1
       }
     )
}


const saveInfo = () => {
    Object.keys(userInfoDemo.value).forEach(item => {
        if (!userInfoDemo.value[item]) {
            delete userInfoDemo.value[item]
        }
    })
    console.log(userInfoDemo.value);
    userInfo.value = {...userInfo.value, ...userInfoDemo.value}
    userInfoDemo.value = { name: '', jobs: '', idno: '', phone: '', email: '' }
    Infoshow.value = false
    qrcode.value.innerHTML = '';
    creatQrCode()
    getJsBarcode()

}
const savePic = () => {
    let iscoins = (bgType.value == 1 && cardStyle.value.bgPic > 2) || (cardStyle.value.avatar.type == 0 && cardStyle.value.avatar.index > 2) || (cardStyle.value.avatar.type == 1 && cardStyle.value.avatar.index > 2)
    let message = iscoins ? 'You have used paid materials, and 10 gold coins will be deducted when saving the picture.' : 'Are you sure you want to save to photo album?'
    showConfirmDialog({
      message,
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
        dowenLoad(iscoins)
    })


}
const getPic = ref('')
const dowenLoad = (type) => {
    if (type && coinsNum.value<10) {
        showToast('Not enough coins')
        return        
    }
    let height = bgType.value == 1 ? getPic.value.scrollHeight - 10 : getPic.value.scrollHeight - 1
    html2canvas(getPic.value,{
        useCORS: true,getPic,
        width: getPic.value.scrollWidth-1,
        height,
      }).then((canvas) => {
       let imgData = canvas.toDataURL("image/jpeg"); // 转base64
       window['reducedCoins'] = (data) => {
	        if (data === "1") {
	        } else {
                if (type) {
                    coinsNum.value = coinsNum.value - 10
                    localStorage.setItem('workLicenseNum', coinsNum.value)
                }

                reSize()
	        }
	    }
	    window['album'](0, imgData);
    });
}
const reSize = () => {
    checkId.value = 0
    label.value = [0,0,0,0]
    bgType.value = 0
    cardStyle.value = {
        bgColor: '#683CC3',
        bgPic: '',
        avatar: {type: 0, index: 0},
        myAva: '',
        barcodeColor: '#030E4D',
        QrCodeColor: '#030E4D',
        fontFamily: 0,
        fontColor: '#030E4D'
    }
    userInfo.value = {
        name: 'Name',
        jobs: 'Jobs',
        idno: 'Click card',
        phone: 'Click card',
        email: 'Click card'
    }
    userInfoDemo.value = {
        name: '',
        jobs: '',
        idno: '',
        phone: '',
        email: ''
    }
    cardStyle.value.avatar.type = route.query.type

}
const lookSave = () => {
    Infoshow.value = true
    userInfoDemo.value.name = userInfo.value.name == 'Name' ? '' : userInfo.value.name
    userInfoDemo.value.jobs = userInfo.value.jobs == 'Jobs' ? '' : userInfo.value.jobs
    userInfoDemo.value.idno = userInfo.value.idno == 'Click card' ? '' : userInfo.value.idno
    userInfoDemo.value.phone = userInfo.value.phone == 'Click card' ? '' : userInfo.value.phone
    userInfoDemo.value.email = userInfo.value.email == 'Click card' ? '' : userInfo.value.email
}
</script>

<style scoped>
@import '../font/index.css';
.makeTop {
    width: 375px;
    height: 13vh;
    background: #8D6CFA;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-family: RubikBlack;
    font-weight: 900;
    font-size: 30px;
    color: #FFFED2;
    position: absolute;
    padding-top: 20px;
    box-sizing: border-box;
}
.katao {
    height: 100%;
    width: 100%;
}
.caozuo {
    width: 338px;
    height: 112px;
    background: #FFFFFF;
    border-radius: 14px 14px 14px 14px;
    margin-top: 20px;
}
.mean {
    width: 338px;
    height: 68px;
    background: #7943E2;
    border-radius: 14px 14px 14px 14px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.calzuoItem {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.label {
    width: 144px;
    height: 42px;
    background: #894DE9;
    border-radius: 21px 21px 21px 21px;
    display: flex;
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* overflow: hidden; */
}
.labelItem {
    width: 72vw;
    height: 40px;
    background: #894DE9;
    border-radius: 21px 21px 21px 21px;
    text-align: center;
    line-height: 42px;
    border: 1px solid transparent;

}
.labelItem_active {
    border: 1px solid #000000;
}
.zygd {
    margin-top: 1vh;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
}
.cardBGItem {
    flex-shrink: 0;
    margin-left: 10px;
    width: 51px;
    height: 51px;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F2F2F2;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    /* overflow: hidden; */
}
.getPic {
    width: 62vw;
    height: 43.7vh;
    position: absolute;
    left: 4.6vw;
    bottom: 1.8vh;
}
.userInfo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.avatar {
    flex-shrink: 0;
    width: 20vw;
    height: 20vw;
    background: linear-gradient( 293deg, #000000 0%, #1C1C1C 47%, #424242 100%);
    border-radius: 100px;
    margin-top: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.myAva {
    width: 89%;
    height: 89%;
    background-color: #fff;
    border-radius: 100px;
    overflow: hidden;
}
.info1 {
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    color: #030E4D;
}
.info2 {
    font-weight: bold;
    font-size: 12px;
    /* color: #FFFFFF; */
    color: #030E4D;
    white-space: nowrap;
}
.pushInfo{
    width: 70vw;
    background-color: #fff;
    word-wrap: normal;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px 16px 16px 16px;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;
    /* overflow: auto; */

}
.infoTitle {
    margin-top: 30px;

}
.infoItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    color: #222222;
    width: 100%;
}
:deep(.van-field) {
    width: 48vw;
}
.ma {
    position: absolute;
    bottom: 5px;
}
</style>